<template  >
  <div class="layout" ref="appRef">
    <Header />
    <img src="@/assets/preview (4).png" alt="" style="position: absolute;margin-left: -60px;margin-top: 20px;z-index: 0">
    <router-view/>
    <img src="@/assets/preview ().png" alt="" style="position: absolute;margin-right: -60px;margin-top: 20px;right: 0;z-index: 0">
    <Footer />
  </div>
</template>

<script lang="ts">
import Header from './Header.vue';
import Footer from './Footer.vue';
import useDraw from "@/utils/useDraw.ts";
import {defineComponent, onMounted, onUnmounted, reactive, ref} from "vue";

export default defineComponent({
  name: 'Layout',
  components: { Header, Footer },
  setup() {
    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
    // 生命周期
    onMounted(() => {
      // appRef.value.style.width = window.screen.width * window.devicePixelRatio + 'px'
      // appRef.value.style.height = window.screen.height * window.devicePixelRatio + 'px'
      // 屏幕适应
      windowDraw()
      calcRate()
    })

    onUnmounted(() => {
      unWindowDraw()
    })

    // return
    return {
      appRef,
    }
  },
});

</script>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 1920px;
  height: 1080px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
}
</style>
